<!--顶部搜索-->
<template>
  <!-- <transition name="bounce"> -->
  <div class="home-seach" :class="seachShow ? 'active' : '' ">
    <div class="seach">
      <div class="seachLeft" @click="jumpHome">
        <!-- <img src="@/assets/logo/logo3.png"> -->
        <img src="@/assets/logo/logo1.jpg" />
      </div>

      <div class="seachCenter">
        <div class="seachCenterk">
          <input
            :class="{'input-border':myfocus}"
            @focus="myfocus = true"
            @blur="myfocus = false "
            v-model.trim="seach"
            placeholder="产品品牌或型号"
            @keyup.enter="jumpSeach(seach)"
          />
          <el-button size="small" type="primary" icon="el-icon-search" @click="jumpSeach(seach)">搜 索</el-button>
        </div>
        <ul>
          <span>热门搜索：</span>
          <a href="#" v-for="item in searchbox" :key="item" @click="clicksearch(item)">{{item}}</a>
        </ul>
      </div>

      <div class="seachRight">
        <div
          class="customerService animated"
          @click="jumpCart"
          :class=" this.$store.state.flag ? 'bounce' : '' "
        >
          <i class="icon iconfont iconleft iconpadding">&#xe78e;</i>
          <span class="cart">购物车</span>
          <span class="num">{{ this.$store.state.shopping_num }}</span>

          <div class="triangle_border_down">
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </transition> -->
</template>
<script>
export default {
  name: "seach",
  data() {
    return {
      myfocus: false, // 获取光标的样式
      seach: null,

      seachShow: false,
      searchbox: ['西门子', 'ABB','FESTO', 'SMC', 'MISUMI']
    };
  },

  methods: {
    clicksearch(item) {
      console.log(item);
      this.$router.push({
        name: "homeSeach",
        params: {
          text: item
        }
      });
    },
    // 跳转到搜索页面
    jumpSeach(seach) {
    
      if (seach == null) {
        
      } else {
        this.$router.push({
          name: "homeSeach",
          params: {
            text: seach
          }
        });
      }
    },

    shangqiao() {
      let nb_invite_ok = document.getElementById("nb_invite_ok");
      if (nb_invite_ok.length > 0) {
        nb_invite_ok.click();
      }
    },

    jumpCart() {
      this.$router.push("/shoppingCart");
    },

    jumpHome() {
      this.scrollinit();
      this.$router.push("/");
    },

    scrollActive() {
      const scrollactivetop = document.documentElement.scrollTop; // 滚轮到顶部距离
      const bodyHeight = document.body.clientHeight; // 当前页面body的高度
      if (bodyHeight > 3000) {
        setInterval(() => {
          scrollactivetop > 1500
            ? (this.seachShow = true)
            : (this.seachShow = false);
        }, 500);
      }
    },

    scrollinit() {
      document.documentElement.scrollTop = 0;
    }
  },

  mounted() {
    // document.addEventListener("scroll", this.scrollActive)
    // this.httpinit()
  },
  deactivated() {
    // document.removeEventListener("scroll", this.scrollActive)
  }
};
</script>
<style lang="scss" scoped>
.home-seach {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  .seach {
    width: 1200px;
    height: 108px;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .seachLeft {
      cursor: pointer;
      width: 212px;
      height: 108px;
      img {
        width: 100%;
        transition: all 0.2s ease-in;
        &:hover {
          opacity: 0.75;
        }
      }
    }
    .seachCenter {
      .seachCenterk {
        width: 480px;
        padding-top: 20px;
        display: flex;
        flex-direction: row;
        input {
          flex: 1;
          padding-left: 10px;
          color: #333;
        }
        .input-border {
          border: 1px solid #409eff;
        }
        /deep/ .el-botton,
        .el-button--small {
          border-radius: 0px;
          font-size: 14px;
        }
        /deep/ .el-input__inner,
        .el-button--small {
          border-radius: 0px;
        }
      }
      ul {
        font-size: 12px;
        margin-top: 3px;
        span {
          color: #666;
        }
        a {
          margin: 0 5px 0 5px;
          color: #666;
        }
        a:hover {
          color: #409eff;
        }
      }
    }
    .seachRight {
      width: 122px;
      height: 108px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 99;
      cursor: pointer;

      .customerService {
        width: 117px;
        height: 38px;
        position: relative;
        line-height: 38px;
        border-radius: 5px;
        color: #fff;
        font-size: 14px;
        line-height: 38px;
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #409eff;
        // background: linear-gradient(bottom right, #392ba7 , #007ee6); /* 标准的语法（必须放在最后） */
        // &:first-child{
        //     background: linear-gradient(bottom right, #007ee6 , #392ba7); /* 标准的语法（必须放在最后） */
        // }
        &:hover {
          background: #63adf7;
        }
        .iconleft {
          font-size: 25px;
          padding: 0 5px;
        }
        .iconactive {
          transform: rotate(180deg);
          transition: 0.2s;
        }
        .iconright {
          font-size: 12px;
        }
        .iconpadding {
          position: absolute;
          top: -1px;
          left: 3px;
        }

        span {
          padding-right: 5px;
          user-select: none;
        }
        .num {
          position: absolute;
          top: -16px;
          right: 10px;
          height: 18px;
          padding: 0 10px;
          border-radius: 5px;
          background-color: #ff9000;
          line-height: 18px;
        }
        .cart {
          padding-left: 40px;
        }

        /*向下*/
        .triangle_border_down {
          width: 0;
          height: 0;
          border-width: 10px 4px 0;
          border-style: solid;
          border-color: #ff9000 transparent transparent; /*黄 透明 透明 */
          position: absolute;
          top: -1px;
          right: 29px;
          z-index: 0;
          transform: rotate(35deg);
        }
      }
    }
  }
}
.active {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  border-bottom: 1px solid #eeecec;
}
</style>
